<template>
	<view>
		<block>
			<view class="head_title">
				<image src="/static/logo.png" class="ele_icon" />
				{{detail_.service_type == '保养'?detail_.leibie.name:""}}{{detail_.service_type||''}}服务报告
				<!-- <image :src="baseUrl+'assets/static/fail.png'" class="ele_icon2" v-if="isOut==0" /> -->
			</view>
			<view class="same_ful">
				<view class="ful_row">
					<text class="ful_left">工单号：</text>
					<text class="ful_right">{{detail_.workID}}</text>
				</view>
				<view class="ful_row">
					<text class="ful_left">日期：</text>
					<text>{{detail_.time}}</text>
				</view>
			</view>
			<view class="border_">
			</view>
			<!-- 	<view class="title_">
				客户及产品信息
			</view> -->
			<view class="same_ful">
				<view class="ful_row">
					<text class="ful_left">客户名称：</text>
					<text class="ful_right">{{detail_.name}}</text>
				</view>
				<view class="ful_row">
					<text class="ful_left">科室：</text>
					<text class="ful_right">{{detail_.department_name}}</text>
				</view>
			</view>
			<!-- <view class="same_ful">
				<view class="ful_row" style="width:100%">
					<text class="ful_left">设备合同状态：</text>
					<text>{{detail_.contract_status}}</text>
				</view>
			</view> -->
			<view class="same_ful">
				<view class="ful_row">
					<text class="ful_left">服务类型：</text>
					<text>{{detail_.service_type}}</text>
				</view>
				<view class="ful_row">
					<text class="ful_left">合同类型：</text>
					<text>{{detail_.contract_status}}</text>
				</view>

				<!-- <view class="ful_row">
					<text class="ful_left">合同类型：</text>
					<text>{{detail_.warranty_type == 1?'单次维修':'单次保养'}}</text>
				</view> -->
			</view>
			<view class="same_ful">
				<view class="ful_row">
					<text class="ful_left">类别：</text>
					<text>{{detail_.pinpai.name||'暂无'}}</text>
				</view>
				<view class="ful_row">
					<text class="ful_left">品牌：</text>
					<text>{{detail_.leibie.name||'暂无'}}</text>
				</view>
			</view>


			<view class="same_ful">
				<view class="ful_row">
					<text class="ful_left">型号：</text>
					<text class="ful_right">{{detail_.xinghao.name||'暂无'}}</text>
				</view>
				<view class="ful_row">
					<text class="ful_left">软件版本：</text>
					<text class="ful_right">{{detail_.software_version||'暂无'}}</text>
				</view>
			</view>

			<view class="same_ful">
				<view class="ful_row" style="width:100%">
					<text class="ful_left">序列号：</text>
					<text class="ful_right">{{detail_.serial||'暂无'}}</text>
				</view>
				<view class="ful_row" style="width:100%">
					<text class="ful_left">质保期：</text>
					<text class="ful_right">{{detail_.qa_time||''}}</text>
				</view>
			</view>
			<view class="same_ful" v-if="detail_.bad_xlh||detail_.bad_bjh">
				<view class="ful_row" style="width:100%">
					<text class="ful_left">坏件：</text>
					<text class="ful_right">{{detail_.bad_xlh||'-'}}(序列号) {{detail_.bad_bjh||'-'}}(备件号)</text>
				</view>
			</view>

			<view class="same_ful" v-if="detail_.change_xlh||detail_.change_bjh">
				<view class="ful_row" style="width:100%">
					<text class="ful_left">更换件：</text>
					<text class="ful_right">{{detail_.change_xlh||'-'}}(序列号) {{detail_.change_bjh||'-'}}(备件号)</text>
				</view>
			</view>

			<view class="content_">
				<text class="content_title">设备故障现象（Equipment malfunction phenomenon）</text>
				<view class="content_imgs">
					<!-- <view class="two_left">
						{{detail_.content || '无'}}
					</view> -->
					<image :src="i" v-for="(i,l) in detail_.imageTex" :key='l'
						@click="previewImageAll(l, detail_.imageTex)" mode="aspectFill" />
				</view>
			</view>
			<view class="border_">
			</view>
			<view class="title_">
				服务信息
			</view>
			<view class="two_">
				<view class="two_left">
					客户{{detail_.is_backup == 0?'报修':'返修'}}内容（Customer repair content）
				</view>
				<view class="two_right" @click="editInfo('content', '客户报修内容')">
					{{detail_.content||'无'}} <uni-icons v-if="!detail_.image&&isOut==0" type="compose" size="16" />
				</view>
			</view>
			<view class="border_">
			</view>
			<view class="two_">
				<view class="two_left">
					{{detail_.is_backup == 0?'维修':'返修'}}服务记录（Maintenance service records）
				</view>
				<view class="two_right" @click="editInfo('repair_record', '维修服务记录')">
					{{detail_.repair_record||'无'}} <uni-icons v-if="!detail_.image&&isOut==0" type="compose"
						size="16" />
				</view>
			</view>
			<view class="border_" />
			<view class="one_">
				<view class="one_left">
					客户{{detail_.is_backup == 0?'报修':'返修'}}时间
				</view>
				<view class="one_right">
					{{detail_.createtime||'-'}}
				</view>
			</view>
			<view class="one_">
				<view class="one_left">
					工程师到达时间
				</view>
				<view class="one_right">
					{{detail_.present_time||'-'}}
				</view>
			</view>
			<view class="border_" />
			<view class="title_"
				v-if="detail_.survey.ballTubeModel || detail_.survey.patientAvrageDaySum || detail_.survey.ballTubeExposeTimes || detail_.survey.ballTubeInstallTime || detail_.survey.isOriginalFactory == '0'">
				球管信息
			</view>
			<view class="one_" v-if="detail_.survey.ballTubeModel">
				<view class="one_left">
					球管型号
				</view>
				<view class="one_right">
					{{detail_.survey.ballTubeModel || ''}}
				</view>
			</view>
			<view class="one_" v-if="detail_.survey.patientAvrageDaySum">
				<view class="one_left">
					平均每日病人量
				</view>
				<view class="one_right">
					{{detail_.survey.patientAvrageDaySum || ''}}
				</view>
			</view>
			<view class="one_" v-if="detail_.survey.ballTubeExposeTimes">
				<view class="one_left">
					球管曝光秒次
				</view>
				<view class="one_right">
					{{detail_.survey.ballTubeExposeTimes || ''}}
				</view>
			</view>
			<view class="one_" v-if="detail_.survey.ballTubeInstallTime">
				<view class="one_left">
					球管安装日期
				</view>
				<view class="one_right">
					{{detail_.survey.ballTubeInstallTime || ''}}
				</view>
			</view>
			<!-- detail_.survey.ballTubeModel || detail_.survey.patientAvrageDaySum || detail_.survey.ballTubeExposeTimes || detail_.survey.ballTubeInstallTime -->
			<view class="one_" v-if="detail_.survey.isOriginalFactory == '1'">
				<view class="one_left">
					若非原厂球管
				</view>
				<view class="one_right">
					{{detail_.survey.isOriginalFactory == '1' ? '是' : '否'}}
				</view>
			</view>
			<view class="one_" v-if="detail_.survey.isOriginalFactory == '0' && detail_.survey.factoryModel">
				<view class="one_left">
					球管厂家型号
				</view>
				<view class="one_right">
					{{detail_.survey.factoryModel || ''}}
				</view>
			</view>
			<view class="border_"
				v-if="detail_.survey.ballTubeModel || detail_.survey.patientAvrageDaySum || detail_.survey.ballTubeExposeTimes || detail_.survey.ballTubeInstallTime || detail_.survey.isOriginalFactory == '0'" />
			<view class="two_" v-if="detail_.enclosure&&detail_.enclosure!=''">
				<view class="two_left">
					附件说明
				</view>
				<view class="two_right">
					{{detail_.enclosure || ''}}
				</view>
			</view>
			<!-- <view v-if="detail_.enclosure_picture && detail_.enclosure_picture.length != 0" class="content_">
				<text class="content_title">附件图片</text>
				<view class="content_imgs">
					<image :src="i" v-for="(i,l) in detail_.enclosure_picture" :key='l'
						@click="previewImageAll(l, detail_.enclosure_picture)" mode="aspectFill" />
				</view>
			</view> -->
			<view class="border_" v-if="detail_.enclosure || detail_.enclosure_picture" />
			<view class="two_">
				<view class="two_left">
					{{detail_.is_backup == 0?'维修':'返修'}}结果及建议：
				</view>
				<view class="two_right" @click="editInfo('ending', '维修结果及建议')">
					{{detail_.ending || '无'}} <uni-icons v-if="!detail_.image&&isOut==0" type="compose" size="16" />
				</view>
			</view>
			<view class="border_">
			</view>
			<view class="sign">
				<view class="">
					客户签字(点击代签字)
				</view>
				<view style="width: 250rpx">
					工程师签字
				</view>
			</view>
			<view class="sign_ture" :style="{ paddingTop: canvas_show ? '500rpx' : '32rpx' }">
				<view class="sign_ture_user" @tap="handleSign('handWriting2')">
					<image v-if="detail_.image" :src="detail_.image" style="width: 100%; height: 100%; z-index: 99;"
						mode="aspectFit" />
					<canvas v-else style="width: 100%; height: 183rpx;" canvas-id="handWriting2" />
				</view>
				<view class="sign_ture_user" @tap="handleSign('handWriting3')">
					<image v-if="detail_.image1" :src="detail_.image1" style="width: 100%; height: 100%; z-index: 99;"
						mode="aspectFit" />
					<canvas v-else style="width: 100%; height: 183rpx;" canvas-id="handWriting3" />
				</view>
				<view class="sign_ture_engineer">
					{{detail_.nickname||'-'}}
				</view>
			</view>
			<view class="border_">
			</view>
			<view class="cont_">
				备注：本函仅针对该工单所反馈问题做确认操作，签字后该工单即变更为完结状态，如有其他问题请重新发起，谢谢
			</view>
			<view class="submit" v-if="isOut==0&&is_scan_code == 1||is_scan_code != 1" @tap="submit"
				:style="{color:detail_.image&&detail_.image1?'#1a66ff!important':'',backgroundColor:detail_.image&&detail_.image1?'#f5f6f8!important':''}">
				{{detail_.image&&detail_.image1?'已提交':'提交'}}
			</view>
			<view class="getPoster">
				<button class="btn-big" style="margin: 15px 0;background: #1A66FF;color: #fff;width: 100%;padding: 5px;"
					size="mini" @tap="down"
					v-if="(isOut==0&&is_scan_code == 1||is_scan_code != 1)&&(detail_.image||detail_.image1)">生成图片</button>
			</view>
		</block>
		<view class="wrapper" v-if="canvas_show">
			<view class="handBtn" @touchmove.stop.prevent="">
				<!-- <image @click="selectColorEvent('black','#1A1A1A')"
					:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
					:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image> -->
				<!-- <image @click="selectColorEvent('red','#ca262a')"
					:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
					:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image> -->
				<button @click="retDraw" class="delBtn">重写</button>
				<button @click="closeDraw" class="closeBtn">关闭</button>
				<!-- 		<button @click="saveCanvasAsImg" class="saveBtn">保存</button> -->
				<!-- <button @click="previewCanvasImg" class="previewBtn">预览</button> -->
				<button @click="subCanvas" class="subBtn">完成</button>
			</view>
			<view class="handCenter">
				<view class="Right" v-if="!isStart">
					<view class="handTitle">请用正楷书写</view>
				</view>
				<canvas class="handWriting" disable-scroll @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
					canvas-id="handWriting" />
			</view>
			<view class="handRight" @touchmove.stop.prevent="">
				<view class="handTitle">请签名</view>
			</view>
		</view>
		<uni-popup ref="editRef" type="center" @maskClick="closeEdit">
			<view class="popup-box">
				<view class="popup-title">{{fieldTitle}}</view>
				<textarea v-model="editContent" placeholder="请输入..." maxlength="140" />
				<view class="popup-btn">
					<button @click="closeEdit">取消</button>
					<button type="primary" @click="saveEdit">保存</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="code" type="center" @maskClick="closeEdit">
			<view class="popup-box2">
				<view class="wx-Logo login">
					<view class="container">
						<view class="">
							<view class="title_t">
								<image src="../../static/logo.png" mode="" class="creatBg"></image>
								<view class="">九键医疗 申请使用</view>
							</view>
							<view class="title_bold">您的微信头像、昵称、手机号信息</view>
							<view class="title_small">请点击下方获取个人信息进行授权</view>
							<view class="choose-avatar-row">
								<button :disabled="showUrl" class="avatar-wrapper" open-type="chooseAvatar"
									@chooseavatar="onChooseAvatar">
									<image class="avatar" :src="showUrl"></image>
								</button>
								<button :disabled="showUrl" class="avatar-wrapper2" open-type="chooseAvatar"
									@chooseavatar="onChooseAvatar"
									style="color: #807E7E;border: none;font-size: 28rpx;text-align: left;">
									<text v-if="!showUrl" class="u-button__text">点击获取头像</text>
									<image v-if="!showUrl" src="../../static/icon2.png" mode=""
										style="margin-left: 288rpx;"></image>
								</button>
							</view>
							<view class="choose-nickname-row">
								<text style="color: #000;margin-right: 48rpx;">昵称</text>
								<input v-model="nickname" :disabled="nickname" type="nickname" placeholder="点击获取昵称"
									style="color: #807E7E;" class='codeinput' />
								<image v-if="!nickname" src="../../static/icon2.png" mode=""
									style="margin-left: 122rpx;"></image>
							</view>
							<view class="choose-nickname-row">
								<text style="color: #000;">手机</text>
								<button :disabled="phone" class="avatar-wrapper2" open-type="getPhoneNumber"
									@getphonenumber="decryptPhoneNumber" @tap="decryptPhoneNumber"
									style="color: #807E7E;border: none;font-size: 28rpx;text-align: left;">
									<text class="u-button__text">{{phone||'点击获取手机号'}}</text>
									<image v-if="!phone" src="../../static/icon2.png" mode=""
										style="margin-left: 240rpx;"></image>
								</button>
							</view>
							<!-- <button class="login-btn" :disabled="btn" type="default" open-type="getPhoneNumber"
								@getphonenumber="decryptPhoneNumber" @tap="decryptPhoneNumber">一键获取手机号</button> -->
						</view>
					</view>
				</view>
				<view class="popup-btn2">
					<button type="primary" @click="saveCode">确定</button>
					<button @click="closeCode">取消</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import baseUrl from '@/request/baseUrl.js'
	import {
		mapMutations
	} from 'vuex'
	export default {

		data() {
			return {
				baseUrl: baseUrl,
				canvasName: 'handWriting2',
				ctx: '',
				startX: null,
				isStart: false,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				canvas_show: false, //画布显示
				imgSrc1: '', //签名数据
				imgSrc2: '', //签名数据
				user_photo: '', // 签字人拍照
				user_photo2: '', // 签字人拍照
				warranty_id: null, //工单id
				service_id: null, //维修id
				report_id: null, //维修报告id
				detail_: {}, //页面详情
				reportImg: '', // 已生成报告图片
				field: '', // 修改字段
				fieldTitle: '', // 修改字段标题
				editContent: '', // 修改内容
				is_scan_code: 0,
				domId: '',
				avatarUrl: '', //头像
				showUrl: "",
				phone: '',
				nickname: '',
				isOut: 1,
				innerAudioContext:null
			}
		},
		onShow() {
			if (this.is_scan_code == 1) {
				this.checkCode()
			} else {
				this.getdata()
			}
		},

		onLoad(e) {
			if (e.q) {
				this.checkCode()
				let res = decodeURIComponent(e.q)
				console.log(res, 'onLoad')
				let result = this.GetRequest(res)
				this.service_id = result.service_id
				this.report_id = result.report_id
				this.is_scan_code = result.is_scan_code

				if (this.is_scan_code == 1 && this.phone == '') {
					this.clearCode()
					setTimeout(() => {
						this.$refs.code.open();
					}, 0)
					return
				}
				console.log(result, 'result')
			} else {
				this.warranty_id = e.warranty_id
				this.service_id = e.service_id
				this.report_id = e.report_id
				this.getdata()
			}

			this.ctx = uni.createCanvasContext("handWriting");
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						this.setCanvasBg('#fff');
					})
					.exec();
			});

		},
		methods: {
			getLei(name) {
				//保养
				let arr = ['CT', 'DR', 'DSA', '超声', 'MRI', 'DR/F', '小C']
				let res = arr.includes(name)
				return res ? res : ""
			},
			checkCode() {
				this.$https.post('/Warranty/is_expire', {
					report_id: this.report_id
				}).then(res => {
					this.isOut = res.data
					console.log(res.data, '-------checkCode')
					if (res.data == 1) {
						uni.showToast({
							title: '二维码已过期！',
							icon: 'error'
						})
						return
					} else {
						this.getdata()
					}
				})
			},
			decryptPhoneNumber(e) {
				if (e.detail.code) {
					this.$https.post('/user/getWxPhone', {
						code: e.detail.code
					}).then(res => {
						this.phone = res.data;
					})
				}
				// let uids = uni.getStorageSync('UID');

			},
			// 选择头像
			async onChooseAvatar(e) {
				let {
					avatarUrl
				} = e.detail

				let getavatarUrl = await this.uploadFilePromise(avatarUrl)
				this.avatarUrl = getavatarUrl.url
				this.showUrl = getavatarUrl.showUrl
			},
			// // 上传头像图片到服务器
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${this.baseUrl}api/common/upload`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
						},
						success: (res) => {
							setTimeout(() => {
								resolve({
									url: JSON.parse(res.data).data.url,
									showUrl: JSON.parse(res.data).data.fullurl,
								})
							}, 1000)
						},
						fail(fails) {
							console.log(fails, 'fail')
						}
					});
				})
			},
			GetRequest(params) {
				let url = params.substring(params.indexOf("?")); //获取url中"?"符后的字串
				let theRequest = new Object();
				if (url.indexOf("?") != -1) {
					let str = url.substr(1);
					let strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},
			...mapMutations(['setReportDetail']),
			down() {
				uni.navigateTo({
					url: '/pages/share/share?id=' + this.report_id + '&reportImg=' + this.reportImg,
				});
			},
			// 签字
			handleSign(domId) {
				this.domId = domId

				if (this.isOut == 1 && this.is_scan_code == 1) return

				if (domId == 'handWriting2' && this.detail_.image) return;
				if (domId == 'handWriting3' && this.detail_.image1) return;

				console.log(this.user_photo, 'user_photo--------', this.user_photo2)
				this.canvasName = domId;
				if ((domId == 'handWriting2' && this.user_photo) || (domId == 'handWriting3' && this.user_photo2)) {
					this.canvas_show = true;
				} else {
					if (this.is_scan_code != 1) {
						uni.chooseLocation({
							success: (openRes) => {
								// this.videoMusic()
								// audioContext.onEnded(() =&gt; {
								//   console.log('音频播放结束');
								// });
								// console.log('选择图片');
								setTimeout(()=>{
									uni.chooseMedia({
										count: 1,
										mediaType: ['image'],
										sourceType: ['camera'],
										camera: 'front',
										success: async (res) => {
											console.log(openRes.address + openRes.name, '：地址')
											let filePath = res.tempFiles[0].tempFilePath;
											let path = await this.uploadImage(filePath, openRes
												.address +
												openRes.name);
											if (domId == 'handWriting2') this.user_photo = path;
											if (domId == 'handWriting3') this.user_photo2 = path;
											this.destroyAudio()
											if (!this.ctx || this.ctx == '') {
												this.ctx = uni.createCanvasContext("handWriting");
												this.$nextTick(() => {
													uni.createSelectorQuery().select(
															'.handCenter')
														.boundingClientRect(rect => {
															this.canvasWidth = rect.width;
															this.canvasHeight = rect
																.height;
															this.setCanvasBg('#fff');
														})
														.exec();
												});
											}
											this.canvas_show = true;
										}
									})
								},1000)
								
							},
							fail: (err) => {
								console.log('err', err);
							}
						});
					} else {
						if (!this.ctx || this.ctx == '') {
							this.ctx = uni.createCanvasContext("handWriting");
							this.$nextTick(() => {
								uni.createSelectorQuery().select('.handCenter')
									.boundingClientRect(rect => {
										this.canvasWidth = rect.width;
										this.canvasHeight = rect.height;
										this.setCanvasBg('#fff');
									})
									.exec();
							});
						}
						this.canvas_show = true;
					}

				}
			},
			destroyAudio()  {
			  if (this.innerAudioContext) {
			    this.innerAudioContext.stop();
			    this.innerAudioContext.destroy();
			    this.innerAudioContext = null;
			  }
			},
			videoMusic() {
				this.destroyAudio()
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
				console.log(this.innerAudioContext, '播放1');
				this.innerAudioContext.obeyMuteSwitch = false
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放23');
				});
				
				this.innerAudioContext.onError((res) => {
					console.log(res.errCode, '错误播放', res.errMsg);
					if(res.errCode == -1){
						this.videoMusic()
						return
					}
				})
				this.innerAudioContext.play();
			},
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				console.log('333333333', this.ctx)
				this.ctx.setStrokeStyle(this.lineColor)
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				this.isStart = true
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				this.setCanvasBg('#fff');
			},
			/**
			 * 选择颜色
			 */
			selectColorEvent(str, color) {
				this.selectColor = str;
				this.lineColor = color;
			},
			// 关闭弹窗
			closeDraw() {
				this.canvas_show = false;
				this.isStart = false
			},
			//完成
			subCanvas() {
				this.isStart = false
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success: (res) => {
						console.log(res.tempFilePath)
						uni.getImageInfo({
							src: res.tempFilePath,
							success: (res1) => {
								let canvasContext = uni.createCanvasContext(this.canvasName)
								let rate = res1.height / res1.width
								let width = 190 / rate
								let height = 190
								canvasContext.scale(0.7, 1);
								canvasContext.translate(height / 2, width / 2)
								canvasContext.rotate((270 * Math.PI) / 180)
								canvasContext.drawImage(res.tempFilePath, -width / 2, -height / 2,
									width, height)
								canvasContext.draw(false, () => {
									uni.canvasToTempFilePath({
										canvasId: this.canvasName,
										fileType: 'png',
										quality: 1, //图片质量
										success: (res2) => {
											console.log(res2.tempFilePath)
											if (this.canvasName ==
												'handWriting2') {
												this.imgSrc1 = res2
													.tempFilePath
											} else {
												this.imgSrc2 = res2
													.tempFilePath
											}
											this.canvas_show = false;
										}
									})
								})
							}
						})
					}
				});
			},
			//保存到相册
			saveCanvasAsImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success: (res) => {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '已保存到相册',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//预览
			previewCanvasImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'jpg',
					quality: 1, //图片质量
					success: (res) => {
						uni.previewImage({
							urls: [res.tempFilePath] //预览图片 数组
						});
					}
				});
			},
			/* 图片预览 */
			previewImageAll(current, urls) {
				uni.previewImage({
					current,
					urls
				})
			},
			// 编辑信息
			editInfo(field, title) {
				if (!this.detail_.image) {
					this.field = field;
					this.fieldTitle = title;
					this.editContent = this.detail_[field];
					this.$refs.editRef.open();
				}
			},
			// 关闭编辑
			closeEdit() {
				this.$refs.editRef.close();
				setTimeout(() => {
					this.field = '';
					this.fieldTitle = '';
					this.editContent = '';
				}, 500);
			},
			// 关闭编辑
			closeCode() {
				uni.navigateTo({
					url: '/pages/home/index'
				})
				// this.$refs.code.close();
				// setTimeout(() => {
				// 	this.clearCode()
				// }, 500);
			},
			clearCode() {
				this.avatarUrl = '';
				this.showUrl = '';
				this.phone = '';
				this.nickname = '';
			},
			// 保存编辑
			saveCode() {
				if (this.avatarUrl == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					return
				}
				if (this.nickname == '') {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					});
					return
				}
				if (this.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return
				}
				this.$refs.code.close();
			},
			// 保存编辑
			saveEdit() {
				let data = {
					report_id: this.report_id,
					content: this.detail_.content,
					ending: this.detail_.ending,
					repair_record: this.detail_.repair_record
				}
				data[this.field] = this.editContent;
				this.$https.post('/warranty/seesignUpdate', data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						success: () => {
							this.closeEdit();
							this.getdata();
						}
					})
				})
			},
			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			},
			/* 获取结单数据 */
			getdata() {
				this.$https.post('/warranty/seesign', {
					report_id: this.report_id
				}).then(res => {
					//contract_status 合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同 
					//service_type 服务类型:0=维修,1=保养,2=安装
					this.detail_ = res.data
					this.detail_.imageTex = res.data.imagess ? res.data.imagess.split(
						',') : [];
					this.detail_.contract_status = this.changeContract(this.detail_.contract_status)
					this.detail_.service_type = this.changeService(this.detail_.service_type)
					this.detail_.enclosure_picture = res.data.enclosure_picture ? res.data.enclosure_picture.split(
						',') : [];
					this.reportImg = res.data.report || '';
					let setData = this.detail_
					console.log('xxxxxx', setData)
					this.setReportDetail(setData)
				})
			},
			/* 转化 合同状态  */
			changeContract(i) {
				// 6单次维修合同、5单次保养合同、4整机铂金保合同、3整机金保合同、2整机银保合同、1整机技术保合同、0无合同
				switch (i) {
					case '0':
						return '无合同';
					case '1':
						return '整机技术保合同';
					case '2':
						return '整机银保合同';
					case '3':
						return '整机金保合同';
					case '4':
						return '整机铂金保合同';
					case '5':
						return '单次保养合同';
					case '6':
						return '单次维修合同';
				}
			},
			/* 转换 服务类型 */
			changeService(i) {
				switch (i) {
					case '0':
						return '维修';
					case '1':
						return '保养';
					case '2':
						return '返修';
				}
			},
			/* 提交 */
			async submit() {
				if (!this.detail_.image || !this.detail_.image1) {
					const img1 = await this.uploadImage(this.imgSrc1);
					const img2 = await this.uploadImage(this.imgSrc2);
					if (!img1) this.user_photo = '';
					if (!img2) this.user_photo2 = '';

					let data = {
						warranty_id: this.detail_.warranty_id, //	工单id
						service_id: this.service_id, //维修id
						report_id: this.report_id, //维修报告id
						image: img1 ? img1 : this.detail_.image,
						image1: img2 ? img2 : this.detail_.image1,
						user_photo: this.user_photo,
						user_photo2: this.user_photo2,
						ycewm: 2
					}

					if (this.is_scan_code == 1) {
						data.ycewm = 1
						data.is_scan_code = 1
						if (this.domId == 'handWriting2') {
							if (!img2) {
								data.user_phone = this.phone
								data.user_nickname = this.nickname
								data.avatar = this.avatarUrl
							} else {
								data.user_phone = this.phone
								data.user_nickname = this.nickname
								data.avatar = this.avatarUrl
								data.user_phone2 = this.phone
								data.user_nickname2 = this.nickname
								data.avatar2 = this.avatarUrl
							}

						} else if (this.domId == 'handWriting3') {
							if (!img1) {
								data.user_phone2 = this.phone
								data.user_nickname2 = this.nickname
								data.avatar2 = this.avatarUrl
							} else {
								data.user_phone = this.phone
								data.user_nickname = this.nickname
								data.avatar = this.avatarUrl
								data.user_phone2 = this.phone
								data.user_nickname2 = this.nickname
								data.avatar2 = this.avatarUrl
							}
						}
					}

					console.log(data, '0000000000000000')

					this.$https.post('/warranty/signature', data).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							success: () => {
								this.getdata()
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						})
					})
				}
			},
			// 上传签名
			uploadImage(tempPath, addsy_txt = '') {
				return new Promise((resolve) => {
					if (!tempPath) return resolve('');
					const token = uni.getStorageSync('userInfo').token
					uni.uploadFile({
						url: `${baseUrl}api/common/upload`,
						filePath: tempPath,
						name: 'file',
						formData: {
							token: token,
							addsy_txt
						},
						success: (res1) => {
							let imgs = JSON.parse(res1.data).data.fullurl
							resolve(imgs)
						},
						fail: () => {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
		padding-left: 0 !important;
	}

	.container {
		width: 100%;
		padding: 30px 30px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.title_t {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			image {
				width: 70rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}

		.title_bold {
			font-weight: 600;
			height: 80rpx;
			font-size: 38rpx;
			line-height: 80rpx;
		}

		.title_small {
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 26rpx;
			width: 660rpx;
			color: #999999;
			margin-top: 50rpx;
			margin-bottom: 20rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			border-bottom: 1px soild #F2F2F2;
		}

		.choose-avatar-row,
		.choose-nickname-row {
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 14px 2px;
			font-size: 28rpx;
			border-bottom: 1px solid #F2F2F2;

			image {
				width: 14rpx;
				height: 24rpx;
			}

			.avatar-wrapper {
				width: 44px;
				height: 44px;
				margin: 0;
				padding: 0;
				margin-right: 26rpx;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}

			.avatar-wrapper2 {
				width: 540rpx;
				height: 34px;
				background-color: transparent;
			}
		}

		.choose-nickname-row {
			height: 70rpx;
			border-top: none;
			padding: 10px 2px;

			text {
				width: 45px;
				margin-right: 24rpx;
				color: #807E7E;
				;
			}
		}
	}

	.login {
		width: 100%;

		&-btn {
			height: 96rpx;
			border-radius: 48rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			color: #fff;
			background-color: #1A66FF;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}

		&-btn::after {
			border: none;
		}

	}

	.cont_ {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #969699;
		margin: 32rpx;
	}

	.sign_ture_engineer {
		width: 225rpx;
		height: 153rpx;
		text-align: center;
		background-color: #F5F6F8;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		line-height: 153rpx;
		font-family: "楷体";
		color: #000000;
	}

	.sign_ture {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		margin-bottom: 30rpx;
		position: relative;
	}

	.sign_ture_user {
		width: 250rpx;
		height: 153rpx;
		background-color: #F5F6F8;
		margin-right: 10rpx;
	}

	.sign {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #303030;
		padding: 0 32rpx;
	}

	.sign>view {
		text-align: center;
		margin: 30rpx 0;
	}

	.border_ {
		height: 2rpx;
		margin: 0 32rpx;
		background-color: #EBEEF1;
	}

	.submit {
		width: 84%;
		margin: 0 auto;
		height: 80rpx;
		text-align: center;
		background-color: $public-oclor;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 10rpx;
	}


	.getPoster {
		padding: 0 30px;
	}

	.head_title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #616161;
		line-height: 40rpx;
		padding: 32rpx;
		background-color: #f7f8fb;
		text-align: center;
		position: relative;

		.ele_icon {
			position: absolute;
			left: 10rpx;
			top: 0;
			margin-top: 10rpx;
			width: 108.6rpx;
			height: 74.7rpx;
		}

		.ele_icon2 {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			margin-top: 10rpx;
			width: 288.6rpx;
			height: 288.7rpx;
		}
	}

	.same_ful {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		font-size: 24rpx;
		margin: 16rpx 0 16rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		letter-spacing: 2rpx;

		.ful_row {
			width: 50%;

			.ful_left {
				color: #969699;
				margin-right: 10rpx;
			}
		}
	}

	.title_ {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #303030;
		padding: 0 32rpx;
		margin: 32rpx 0;

	}

	.content_ {
		padding: 0 32rpx 20rpx;

		.content_title {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #969699;
		}

		.content_imgs {
			padding: 0;

			.two_left {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000;
				margin-top: 10rpx;
			}

			image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 10rpx;
				margin-top: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.one_ {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		margin: 16rpx 0 16rpx;

		.one_left {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #969699;
		}

		.one_right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	.two_ {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 32rpx;
		margin: 16rpx 0 16rpx;
		font-size: 24rpx;

		.two_left {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #969699;
			margin-bottom: 16rpx;
		}

		.two_right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			word-wrap: break-word;
		}
	}

	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}

	.wrapper {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
		background-color: #fff
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
		z-index: 99 !important;
	}

	.Right {
		position: absolute;
		left: 8.4%;
		font-size: 57px;
		top: 45%;
		z-index: 10000000;
		display: inline-flex;
		align-items: center;

		.handTitle {
			transform: rotate(90deg);
			flex: 1;
			color: #b3b3b3;
		}
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
		margin: 30rpx 0;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.closeBtn {
		position: absolute;
		top: 100rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.uploadBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	}

	.popup-box2 {
		width: 750rpx;
		height: 100vh;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.popup-title {
			color: #909090;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		textarea {
			width: 100%;
			color: #303030
		}

		.popup-btn {

			button {

				margin-top: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.popup-btn2 {
			padding: 140rpx;

			button {
				margin-top: 20rpx;

				&:last-child {
					margin-top: 40rpx;
					color: #1aad19 // margin-right: 0;
				}
			}
		}
	}

	.popup-box {
		width: 660rpx;
		height: auto;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.popup-title {
			color: #909090;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		textarea {
			width: 100%;
			color: #303030
		}

		.popup-btn {
			display: flex;

			button {
				flex: 1;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
</style>